<template>
  <div>
    <!-- 位置栏 -->
    <div class="location-bar">
      <div>位置 :&ensp;</div>
      <div @click="cancel">新闻列表</div>
      <div style="color: #000">/新增新闻</div>
    </div>
    <div class="content-box">
      <a-form-model :model="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }" :rules="rules" ref="ruleForm">
        <a-form-model-item label="新闻标题" prop="title">
          <a-input v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="所属栏目" prop="articleCategoryId">
          <a-select show-search placeholder="请选择" v-model="form.articleCategoryId">
            <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
              {{ col.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="图片" prop="cover">
          <upload-widget v-model="form.cover"></upload-widget>
        </a-form-model-item>
        <a-form-model-item label="内容" prop="content">
          <rich-text-editor v-model="form.content"></rich-text-editor>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 8 }">
          <a-button @click="cancel"> 取消 </a-button>
          <a-button type="primary" @click="onSubmit" style="margin-left: 30px"> 提交 </a-button>
          <a-button type="danger" @click="onPut" style="margin-left: 30px"> 上架 </a-button>
        </a-form-model-item>
      </a-form-model>
      <!-- 弹窗 -->
      <a-modal v-model="visible" title="上架确认" @ok="handleOk">
        <p>确认要上架此新闻吗？</p>
      </a-modal>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      column: [], //一级栏目
      visible: false,
      // 文章表格数据
      form: {
        title: '',
        cover: '',
        articleCategoryId: undefined,
        content: '',
        status: '',
      },
      rules: {
        title: [{ required: true, message: '请输入新闻标题!', trigger: 'blur' }],
        cover: [{ required: true, message: '请上传图片!', trigger: 'blur' }],
        articleCategoryId: [{ required: true, message: '请选择栏目!', trigger: 'change' }],
        content: [{ required: true, message: '请输入内容!', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getColumn();
  },
  methods: {
    //读取一级栏目
    async getColumn() {
      let reqData = {};
      let getListUrl = `/section/list`;
      let result = await this.axios.get(getListUrl, reqData);
      this.column = result.data.data;
      console.log(this.column);
    },
    //保存
    async savepreservation() {
      let reqData = { cover: this.form.cover, sectionId: this.form.articleCategoryId, title: this.form.title, content: this.form.content, status: this.form.status };
      let saveUrl = `/news/save`;
      let result = await this.axios.post(saveUrl, reqData);
      console.log(result);
      this.cancel();
    },
    //保存
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.form.status = '未上架';
          // console.log(this.form);
          this.savepreservation();
        }
      });
    },
    //上架
    onPut() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.form.status = '上架';
          console.log(this.form);
          this.visible = true;
        }
      });
    },
    handleOk() {
      this.visible = false;
      this.savepreservation();
    },
    //返回新闻列表
    cancel() {
      this.$router.push({
        name: 'Newslist',
      });
    },
  },
};
</script>

<style>
.location-bar {
  display: flex;
  font-size: 14px;
  color: #88898b;
}
.content-box {
  width: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 50px 30px;
}
</style>